﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>采购订单</title>
    <link href="//unpkg.com/layui@2.10.3/dist/css/layui.css" rel="stylesheet">
    <style>
        .hidden {
            display: none !important;
        }
        /* 全局样式优化 */
        body {
            padding: 20px;
            background-color: #f2f2f2;
        }

        .layui-form {
            background: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        /* 表格样式优化 */
        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 15px;
        }

        td {
            vertical-align: top;
            padding: 0 10px;
        }

        /* 标签样式统一 */
        label {
            width: auto !important;
            min-width: 100px;
            font-weight: bold;
        }

        .layui-form-label {
            width: auto !important;
            text-align: right;
            padding-right: 15px;
        }

        /* 必填项标识 */
        .required:after {
            content: '*';
            color: red;
            margin-left: 4px;
        }

        /* 输入框样式 */
        .layui-input, .layui-select, .layui-textarea {
            border-radius: 4px;
        }

        /* 按钮样式 */
        .action-buttons {
            margin-top: 20px;
            text-align: center;
        }

            .action-buttons .layui-btn {
                margin: 0 10px;
                min-width: 100px;
            }

        /* 生成订单号区域 */
        .generate-area {
            display: flex;
            align-items: center;
            gap: 10px;
        }

            .generate-area input {
                flex: 1;
                min-width: 180px;
            }

            .generate-area button {
                width: 110px;
            }
    </style>
</head>
<body>
    <form class="layui-form" action="">
        <table>
            <tr>
                <td colspan="2">
                    <label class="layui-form-label">订单主题</label>
                    <div class="layui-input-block">
                        <input type="text" name="getMaintitle" lay-verify="required" placeholder="请输入订单主题" autocomplete="off" class="layui-input">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-group">
                        <label class="layui-form-label">采购单号</label>
                        <div class="generate-area">
                            <input style="width:70px" type="text" name="orderCode" id="orderCode" class="layui-input" readonly>
                            <button type="button" id="generateBtn" class="layui-btn layui-btn-primary">生成</button>
                        </div>
                    </div>
                </td>
                <td>
                    @* <div class="form-group"> *@
                    @*     <label class="layui-form-label">关联请购</label> *@
                    @*     <input type="text" name="joinGetOrderid" id="joinGetOrderid" class="layui-input" placeholder="请选择关联请购单"> *@
                    @* </div> *@
                    <div class="layui-form-item">
                        <label class="layui-form-label">关联请购</label>
                        <div class="layui-input-block">
                            <input type="text" name="joinGetOrderid" id="joinGetOrderid" placeholder="请选择请购单号" readonly class="layui-input" style="cursor: pointer;">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-group">
                        <label class="layui-form-label">关联销售订单</label>
                        <input style="width:150px" type="text" name="joinShouOrderid" id="joinShouOrderid" class="layui-input" placeholder="请选择关联销售订单">
                    </div>
                </td>
                <td>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">采购日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="saleDate" id="purchaseDate" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">供应商名称</label>
                        <div class="layui-input-block">
                            <select name="gongName" id="gongNameid" lay-verify="required" lay-search>
                                <option value="">请选择供应商</option>
                            </select>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系人</label>
                        <div class="layui-input-block">
                            <input type="text" name="lianName" placeholder="请输入联系人" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="phoneNumber" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </td>
                <td>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">采购人员</label>
                        <div class="layui-input-block">
                            <input type="text" name="byName" lay-verify="required" placeholder="请输入采购人员" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="layui-form-item">
                        <label class="layui-form-label">采购部门</label>
                        <div class="layui-input-block">
                            <input type="text" name="byDepart" placeholder="请输入采购部门" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </td>
                <td>
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系方式</label>
                        <div class="layui-input-block">
                            <input type="text" name="lianPhone" placeholder="请输入联系方式" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="layui-form-item">
                        <label class="layui-form-label">关联项目</label>
                        <div class="layui-input-block">
                            <select name="joinProject" lay-search>
                                <option value="">请选择关联项目</option>
                                <option value="1">生产项目1</option>
                                <option value="2">生产项目2</option>
                                <option value="3">生产项目3</option>
                                <option value="4">生产项目4</option>
                            </select>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">结算方式</label>
                        <div class="layui-input-block">
                            <select name="suanType" lay-verify="required">
                                <option value="">请选择结算方式</option>
                                <option value="1">现金</option>
                                <option value="2">银行转账</option>
                                <option value="3">支付宝</option>
                                <option value="4">微信支付</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">交付地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" lay-verify="required" placeholder="请输入交付地址" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea name="remember" placeholder="请输入备注内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="action-buttons">
                    <button id="save-btn" class="layui-btn" lay-submit lay-filter="submitAdd">
                        <i class="layui-icon">&#xe608;</i> 保存
                    </button>
                    <button type="reset" class="layui-btn layui-btn-danger">重置</button>
                </td>
            </tr>
        </table>
    </form>
    @* 请购单 *@
    <div id="purchaseOrderModal" style="display: none; padding: 20px;">
        <table class="layui-table">
            <thead>
                <tr>
                    <th>选择</th>
                    <th>序号</th>
                    <th>请购单号</th>
                    <th>请购主题</th>
                    <th>请购日期</th>
                    <th>请购部门</th>
                    <th>请购人员</th>
                    <th>物品概要</th>
                    <th>关联项目</th>
                    <th>采购状态</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
                @* <tr> *@
                @*     <td><input type="checkbox" lay-skin="primary"></td> *@
                @*     <td>1</td> *@
                @*     <td>QG05345</td> *@
                @*     <td>物料024请购</td> *@
                @*     <td>2025-06-07</td> *@
                @*     <td>部门一</td> *@
                @*     <td>黄蓉蓉</td> *@
                @*     <td>新产品1</td> *@
                @* </tr> *@
                <!-- 其他行数据... -->
            </tbody>
        </table>
        <div class="layui-form-item" style="margin-top: 15px; text-align: center;">
            <button class="layui-btn layui-btn-normal" id="confirmSelection">确认选择</button>
            <button class="layui-btn layui-btn-primary" id="cancelSelection">取消</button>
        </div>
    </div>

    @* 销售单 *@
    <div id="purchaseOrderModal2" style="display: none; padding: 20px;">
        <table class="layui-table">
            <thead>
                <tr>
                    <th>选择</th>
                    <th>序号</th>
                    <th>请购单号</th>
                    <th>销售订单主题</th>
                    <th>客户名称</th>
                    <th>销售日期</th>
                    <th>采购状态</th>
                    <th>物品概要</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="layui-form-item" style="margin-top: 15px; text-align: center;">
            <button class="layui-btn layui-btn-normal" id="confirmSelection2">确认选择</button>
            <button class="layui-btn layui-btn-primary" id="cancelSelection2">取消</button>
        </div>
    </div>

    <script src="//unpkg.com/layui@2.10.3/dist/layui.js"></script>
    <script>
        layui.use(['form', 'laydate','layer','table'], function(){
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var table = layui.table;

                     // #region 初始化函数

            // 点击输入框弹出选择窗口
            $('#joinGetOrderid').on('click', function(){
                //动态方法
                var loading = layer.load(1);
                $.ajax({
                    //url:'http://localhost:5234/api/MyOrderMement/GetQingGou',
                    url: "@ViewBag.BaseUrl/T7/MyOrderMement/GetQingGou",
                    type:'get',
                    dataType:'json',
                    success:function(res){
                        layer.close(loading);
                        if(res.code==210){
                            var tbody=''
                            res.data.forEach(function(item, index){
                                    tbody += '<tr>' +
                                    '<td><input type="checkbox" lay-skin="primary" value="' + item.joinGetOrderid +         '"></td>' +
                                    '<td>' + item.joinGetOrderid + '</td>' +
                                    '<td>' + item.joinGetOrderCode + '</td>' +
                                    '<td>' + item.getOrderTitle + '</td>' +
                                    '<td>' + item.getTime + '</td>' +
                                    '<td>' + item.getDepart + '</td>' +
                                    '<td>' + item.getPerson + '</td>' +
                                    '<td>' + item.productGyao + '</td>' +
                                    '<td>' + item.joinproject + '</td>' +
                                    '<td>' + item.bystuct + '</td>' +
                                    '<td>' + item.byRemember + '</td>' +
                                    '</tr>';
                            });

                            // 将生成的内容填充到表格中
                            $('#purchaseOrderModal tbody').html(tbody);
                            form.render('checkbox'); // 重新渲染复选框

                            layer.open({
                                type: 1,
                                title: '选择请购单',
                                area: ['900px', '500px'],
                                content: $('#purchaseOrderModal'),
                                btn: false,
                                shadeClose: true
                            });
                        }else {
                            layer.msg(res.msg || '获取请购单数据失败', {icon: 2});
                        }
                    },
                    error: function(xhr, status, error){
                        layer.close(loading);
                        layer.msg('获取请购单数据失败: ' + error, {icon: 2});
                    }
                })
            });

            // 确认选择按钮点击事件
            $('#confirmSelection').on('click', function(){
                var selectedItems = [];
                $('#purchaseOrderModal input[type="checkbox"]:checked').each(function(){
                    var row = $(this).closest('tr');
                    selectedItems.push({
                        orderNo: row.find('td:eq(1)').text(),
                        subject: row.find('td:eq(2)').text()
                    });
                });

                if(selectedItems.length > 0) {
                    // 这里可以根据需要处理选中的数据
                    // 例如将请购单号显示在输入框中
                    $('#joinGetOrderid').val(selectedItems[0].orderNo);
                    $('#purchaseOrderModal tbody').empty(); // 清空表格内容
                    $('#purchaseOrderModal thead').empty(); // 清空表格内容
                    layer.closeAll();
                } else {
                    layer.msg('请至少选择一项', {icon: 2});
                }
            });

            // 取消按钮点击事件
            $('#cancelSelection').on('click', function(){
                layer.closeAll();
            });

            // 初始化表格复选框
            form.render('checkbox');
        // #endregion

        // #region 初始化函数
            // 点击输入框弹出选择窗口
            $('#joinShouOrderid').on('click', function(){
                //动态方法
                var loading = layer.load(1);
                $.ajax({
                    url:'http://localhost:5234/api/MyOrderMement/GetShouOrder',
                    //url: "@ViewBag.BaseUrl/T7/MyOrderMement/GetShouOrder",
                    type:'get',
                    dataType:'json',
                    success:function(res){
                        layer.close(loading);
                        if(res.code==210){
                            var tbody=''
                            res.data.forEach(function(item, index){
                                    tbody += '<tr>' +
                                    '<td><input type="checkbox" lay-skin="primary" value="' + item.joinShouOrderid +   '"></td>' +
                                    '<td>' + item.joinShouOrderid + '</td>' +
                                    '<td>' + item.joinShouOrderCode + '</td>' +
                                    '<td>' + item.joinShouOrderTitle + '</td>' +
                                    '<td>' + item.clientName + '</td>' +
                                    '<td>' + item.saleDate + '</td>' +
                                    '<td>' + item.byStatus + '</td>' +
                                    '<td>' + item.wugYao + '</td>' +
                                    '</tr>';
                            });

                            // 将生成的内容填充到表格中
                            $('#purchaseOrderModal2 tbody').html(tbody);
                            form.render('checkbox'); // 重新渲染复选框

                            layer.open({
                                type: 1,
                                title: '选择销售单',
                                area: ['900px', '500px'],
                                content: $('#purchaseOrderModal2'),
                                btn: false,
                                shadeClose: true
                            });
                        }else {
                            layer.msg(res.msg || '获取请购单数据失败', {icon: 2});
                        }
                    },
                    error: function(xhr, status, error){
                        layer.close(loading);
                        layer.msg('获取请购单数据失败: ' + error, {icon: 2});
                    }
                })
            });

            // 确认选择按钮点击事件
            $('#confirmSelection2').on('click', function(){
                var selectedItems = [];
                $('#purchaseOrderModal2 input[type="checkbox"]:checked').each(function(){
                    var row = $(this).closest('tr');
                    selectedItems.push({
                        orderNo: row.find('td:eq(1)').text(),
                        subject: row.find('td:eq(2)').text()
                    });
                });

                if(selectedItems.length > 0) {
                    // 这里可以根据需要处理选中的数据
                    // 例如将请购单号显示在输入框中
                    $('#joinShouOrderid').val(selectedItems[0].orderNo);
                    $('#purchaseOrderModal2 tbody').empty(); // 清空表格内容
                    $('#purchaseOrderModal2 thead').empty(); // 清空thead
                    layer.closeAll();
                } else {
                    layer.msg('请至少选择一项', {icon: 2});
                }
            });

            // 取消按钮点击事件
            $('#cancelSelection2').on('click', function(){
                layer.closeAll();
            });

            // 初始化表格复选框
                form.render('checkbox');
        // #endregion




            // 初始化日期选择器
            laydate.render({
                elem: '#purchaseDate',
                format: 'yyyy-MM-dd',
                value: new Date()
            });

            // 生成订单号函数
            function generateOrderNumber() {
                // 4位随机字母（大写）
                let letters = '';
                const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                for (let i = 0; i < 4; i++) {
                    letters += alphabet.charAt(Math.floor(Math.random() * alphabet.length));
                }

                // 11位随机数字
                let numbers = '';
                for (let i = 0; i < 11; i++) {
                    numbers += Math.floor(Math.random() * 10);
                }

                return letters + numbers;
            }

            // 生成按钮点击事件
            document.getElementById('generateBtn').addEventListener('click', function() {
                document.getElementById('orderCode').value = generateOrderNumber();
            });

            // 初始化生成一个订单号
            document.getElementById('orderCode').value = generateOrderNumber();

            // 表单提交
            form.on('submit(submitAdd)', function(data){
                console.log("data是：",data)
                var fromData = data.field;
                console.log(fromData.orderCode);
                var currentUser = localStorage.getItem('LoginName');
                var postData = {
                    getMaintitle: fromData.getMaintitle,
                    orderCode: fromData.orderCode,
                    joinGetOrderid: fromData.joinGetOrderid,
                    joinShouOrderid: fromData.joinShouOrderid,
                    saleDate: fromData.saleDate,
                    gongName: fromData.gongName,
                    lianName: fromData.lianName,
                    phoneNumber: fromData.phoneNumber,
                    byName: fromData.byName,
                    byDepart: fromData.byDepart,
                    lianPhone: fromData.lianPhone,
                    joinProject: fromData.joinProject,
                    suanType: fromData.suanType,
                    loginName:currentUser,
                    address: fromData.address,
                    remember: fromData.remember,
                };
                console.log('提交数据:', fromData); // 调试输出
                var loadIndex = layer.load(2);
                $.ajax({
                    url:'http://localhost:5090/api/OrderManagement/AddOrdermement',
                    //url: "@ViewBag.BaseUrl/T8/OrderManagement/AddOrdermement",
                    data:JSON.stringify(postData),
                    type:'post',
                    dataType:'json',
                    contentType: 'application/json',
                    success:function(res){
                        console.log(res)
                        layer.close(loadIndex);
                        if (res.code == 212) {
                            layer.msg(res.msg, {icon: 1});
                            location.href='ShowMement'
                        } else {
                            layer.msg(res.msg || '新增失败', {icon: 2});
                        }
                    },
                    error: function(xhr, status, error) {
                        layer.close(loadIndex);
                        layer.msg('请求失败: ' + error, {icon: 2});
                        console.error('AJAX请求失败:', error);
                    }
                })
                return false; // 阻止表单跳转
            });
            function loadSupplyMethod(){
                $.ajax({
                    type: 'GET',
                    url: 'http://localhost:5234/api/MateSuppli/GetMateria', 
                    //url: "@ViewBag.BaseUrl/T7/MateSuppli/GetMateria",
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 210) {
                            var options = '';
                            $.each(res.data, function (index, item) {
                                options += `<option value="${item.supid}">${item.supplierName}</option>`;
                            });
                            $('#gongNameid').append(options);
                            form.render('select'); // 重新渲染下拉框
                        } else {
                            layer.msg('获取数据失败：' + res.msg);
                        }
                    },
                    error: function () {
                        layer.msg('网络请求失败，请检查网络！');
                    }
                });
            }
            loadSupplyMethod()
        });
    </script>
</body>
</html>